<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('健康档案')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<style>
    .health_table {
        width: 100%;
    }

    .health_table tr {
        height: 40px;
    }

    .health_table td {
        border: 1px solid #000;
    }
</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-register-edit" th:object="${healthRegister}">
        <input name="id" th:field="*{id}" type="hidden">
        <table class="health_table">
            <tr>
                <th style="width: 10%;">姓名</th>
                <th style="width: 40%;"><input name="name" th:field="*{name}" class="form-control" type="text" readonly>
                </th>
                <th style="width: 10%;"></th>
                <th style="width: 40%;"></th>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <div class="radio-box" th:each="dict : ${@dict.getType('sys_user_sex')}">
                        <input type="radio" th:id="${dict.dictCode}" name="sex" th:value="${dict.dictValue}"
                               th:field="*{sex}" disabled>
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </td>
                <td>出生日期</td>
                <td>
                    <input name="birthday" th:value="${#dates.format(healthRegister.birthday, 'yyyy-MM-dd')}"
                           class="form-control" placeholder="yyyy-MM-dd" type="text" readonly>
                </td>
            </tr>
            <tr>
                <td>身份证号</td>
                <td>
                    <input name="idCard" th:field="*{idCard}" class="form-control" type="text" readonly>
                </td>
                <td>工作单位</td>
                <td>
                    <input name="workPlace" th:field="*{workPlace}" class="form-control" type="text">
                </td>
            </tr>
            <tr>
                <td>本人电话</td>
                <td colspan="3">
                    <input name="phone" th:field="*{phone}" class="form-control" type="number">
                </td>
            </tr>
            <tr>
                <td>联系人姓名</td>
                <td>
                    <input name="contactsName" th:field="*{contactsName}" class="form-control" type="text">
                </td>
                <td>联系人电话</td>
                <td>
                    <input name="contactsPhone" th:field="*{contactsPhone}" class="form-control" type="text">
                </td>
            </tr>
            <tr>
                <td>常驻类型</td>
                <td>
                    <div class="radio-box" th:each="dict : ${@dict.getType('residence')}">
                        <input type="radio" th:id="${dict.dictCode}" name="residence" th:value="${dict.dictValue}"
                               th:field="*{residence}">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </td>
                <td>民族</td>
                <td>
                    <div class="radio-box">
                        <input type="radio" id="nation_1" name="nationKey" th:value="1" th:field="*{nationKey}">
                        <label th:text="汉族" for="nation_1"></label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" id="nation_2" name="nationKey" th:value="2" th:field="*{nationKey}">
                        <label for="nation_2"><input id="other_nation" th:value="*{nationKey==1?'':nationText}"
                                                     class="form-control" type="text" placeholder="其他"
                                                     onkeyup="changeOtherNation()"></label>
                    </div>
                    <input name="nationText" id="nationText" th:field="*{nationText}" type="text" readonly hidden>
                </td>
            </tr>
            <tr>
                <td>血型</td>
                <td colspan="3">
                    <div class="radio-box" th:each="dict : ${@dict.getType('blood')}">
                        <input type="radio" th:id="${dict.dictCode}" name="blood" th:value="${dict.dictValue}"
                               th:field="*{blood}">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>文化程度</td>
                <td colspan="3">
                    <div class="radio-box" th:each="dict : ${@dict.getType('culture')}">
                        <input type="radio" th:id="${dict.dictCode}" name="culture" th:value="${dict.dictValue}"
                               th:field="*{culture}">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>职业</td>
                <td colspan="3">
                    <div class="radio-box" th:each="dict : ${@dict.getType('occupation')}">
                        <input type="radio" th:id="${dict.dictCode}" name="occupation" th:value="${dict.dictValue}"
                               th:field="*{occupation}">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>婚姻状况</td>
                <td colspan="3">
                    <div class="radio-box" th:each="dict : ${@dict.getType('marry')}">
                        <input type="radio" th:id="${dict.dictCode}" name="marry" th:value="${dict.dictValue}"
                               th:field="*{marry}">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>医疗保险</td>
                <td colspan="3">
                    <div class="check-box" th:each="dict : ${@dict.getType('insurance')}">
                        <input type="checkbox" th:id="${dict.dictCode}" name="insurance" th:value="${dict.dictValue}"
                               th:field="*{insuranceList}">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>药物过敏史</td>
                <td colspan="3">
                    <div class="check-box form-inline" th:each="dict : ${@dict.getType('allergy')}" >
                        <input type="checkbox" th:id="${dict.dictCode}" th:value="${dict.dictValue}"
                               th:field="*{allergyList}"  style="top: 50%;transform: translateY(-50%);" disabled="disabled">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel=='其他'?'':dict.dictLabel}"></label>
                        <label style="" th:if="${dict.dictLabel=='其他'}">
                            <input name="allergyOther" id="allergyOther" th:field="*{allergyOther}" class="form-control" type="text" placeholder="其他" readonly>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>疾病史</td>
                <td colspan="3">
                    <div class="check-box" th:each="dict : ${@dict.getType('disease')}">
                        <input type="checkbox" th:id="${dict.dictCode}" th:value="${dict.dictValue}"
                               th:field="*{diseaseList}" disabled>
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>手术史</td>
                <td colspan="3">
                    <div class="radio-box form-inline">
                        <input type="radio" id="operation_1" th:value="1" th:field="*{operation.code}" disabled>
                        <label th:text="无" for="operation_1"></label>
                    </div>
                    <div class="radio-box form-inline">
                        <input type="radio" id="operation_2" th:value="2" th:field="*{operation.code}" disabled>
                        <label for="operation_2">
                            有：名称
                            <input name="operation.name" id="operationName" th:field="*{operation.name}"
                                   class="form-control" type="text" readonly>
                            时间
                            <input id="operationDate"
                                   th:value="${#dates.format(healthRegister.operation.date, 'yyyy-MM-dd')}"
                                   class="form-control" placeholder="yyyy-MM-dd" type="text" readonly>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>外伤史</td>
                <td colspan="3">
                    <div class="radio-box form-inline">
                        <input type="radio" id="trauma_1" th:value="1" th:field="*{trauma.code}" disabled>
                        <label th:text="无" for="trauma_1"></label>
                    </div>
                    <div class="radio-box form-inline">
                        <input type="radio" id="trauma_2" th:value="2" th:field="*{trauma.code}" disabled>
                        <label for="trauma_2">
                            有：名称
                            <input name="trauma.name" id="traumaName" th:field="*{trauma.name}" class="form-control"
                                   type="text" readonly>
                            时间
                            <input id="traumaDate"
                                   th:value="${#dates.format(healthRegister.trauma.date, 'yyyy-MM-dd')}"
                                   class="form-control" placeholder="yyyy-MM-dd" type="text" readonly>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>输血史</td>
                <td colspan="3">
                    <div class="radio-box form-inline">
                        <input type="radio" id="metachysis_1" th:value="1" th:field="*{metachysis.code}" disabled>
                        <label th:text="无" for="metachysis_1"></label>
                    </div>
                    <div class="radio-box form-inline">
                        <input type="radio" id="metachysis_2" th:value="2" th:field="*{metachysis.code}" disabled>
                        <label for="metachysis_2">
                            有：名称
                            <input name="metachysis.name" id="metachysisName" th:field="*{metachysis.name}"
                                   class="form-control" type="text" readonly>
                            时间
                            <input id="metachysisDate"
                                   th:value="${#dates.format(healthRegister.metachysis.date, 'yyyy-MM-dd')}"
                                   class="form-control" placeholder="yyyy-MM-dd" type="text" readonly>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>遗传病史</td>
                <td colspan="3">
                    <div class="radio-box form-inline">
                        <input type="radio" id="heritable_1" th:value="1" th:field="*{heritable.code}" disabled>
                        <label th:text="无" for="heritable_1"></label>
                    </div>
                    <div class="radio-box form-inline">
                        <input type="radio" id="heritable_2" th:value="2" th:field="*{heritable.code}" disabled>
                        <label for="heritable_2">
                            有：名称
                            <input th:field="*{heritable.name}"
                                   class="form-control" type="text" readonly>
                        </label>
                    </div>
                </td>
            </tr>

            <tr>
                <td>残疾情况</td>
                <td colspan="3">
                    <div class="check-box form-inline" th:each="dict : ${@dict.getType('disability')}" >
                        <input type="checkbox" th:id="${dict.dictCode}" th:value="${dict.dictValue}"
                               th:field="*{disabilityList}"  style="top: 50%;transform: translateY(-50%);" disabled>
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel=='其他'?'':dict.dictLabel}"></label>
                        <label style="" th:if="${dict.dictLabel=='其他'}">
                            <input name="disabilityOther" id="disabilityOther" th:field="*{disabilityOther}" class="form-control" type="text" placeholder="其他残疾" readonly>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>备注</td>
                <td colspan="3">
                    <div class="col-sm-8" style="width:100%;height:100%;padding-right:0px;padding-left:0px;">
                        <textarea id="remark" th:field="*{remark}" class="form-control" style="resize: none" required></textarea>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "system/health_register";
    $("#form-register-edit").validate({
        focusCleanup: true
    });

    $(function () {
        $('input[name="nationKey"]').on('ifChecked', function (event) {
            var nationKey = $(event.target).val();
            changeNation(nationKey);
        });

        $('input[name="operation.code"]').on('ifChecked', function (event) {
            var operationKey = $(event.target).val();
            changeOperation(operationKey);
        });

        $('input[name="trauma.code"]').on('ifChecked', function (event) {
            var traumaCode = $(event.target).val();
            changeTrauma(traumaCode);
        });

        $('input[name="diseaseList"]').on('ifChanged', function (event) {
            selectDisease(event);
        });

        $('input[name="allergyList"]').on('ifChanged', function (event) {
            selectAllergy(event);
        });

        $('input[name="disabilityList"]').on('ifChanged', function (event) {
            selectDisability(event);
        });

        $('input[name="metachysis.code"]').on('ifChecked', function (event) {
            var metachysisCode = $(event.target).val();
            selectMetachysis(metachysisCode);
        });


    })

    function submitHandler() {
        $("#remark").attr("required",false);
        if ($.validate.form()) {
            $.operate.save(prefix + "/examine", $('#form-register-edit').serialize());
        }
    }

    function refuseHandler(){
        $("#remark").attr("required",true);
        if ($.validate.form()) {
            $.operate.save(prefix + "/refuse", $('#form-register-edit').serialize());
        }
    }

    $("input[name='birthday']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='operation.date']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='trauma.date']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='metachysis.date']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    function changeNation(nationKey) {
        if (nationKey == 1) {
            $("#other_nation").val("");
            $("#nationText").val("汉族");
            $("#other_nation").attr("readonly", true);
        } else {
            $("#other_nation").val("");
            $("#nationText").val("");
            $("#other_nation").attr("readonly", false);
        }
    }

    function changeOperation(operationKey) {
        if (operationKey == 1) {
            $("#operationName").val("");
            $("#operationDate").val("");
        }
    }

    function changeTrauma(traumaCode) {
        if (traumaCode == 1) {
            $("#traumaName").val("");
            $("#traumaDate").val("");
        }
    }

    function selectMetachysis(metachysisCode) {
        if (metachysisCode == 1) {
            $("#metachysisName").val("");
            $("#metachysisDate").val("");
        }
    }

    function selectDisease(event) {
        var disease = $(event.target).val();
        if (disease == 12) {
            $("#diseaseText").attr("readonly", false);
        }
    }

    function selectAllergy(event){
        var allergy = $(event.target).val();
        if (allergy == 5 && event.currentTarget.checked == true) {
            $("#allergyOther").attr("readonly", false);
        }else if(allergy == 5 && event.currentTarget.checked == false){
            $("#allergyOther").attr("readonly", true);
            $("#allergyOther").val("");
        }
    }
    function selectDisability(event){
        var disability = $(event.target).val();
        if (disability == 8 && event.currentTarget.checked == true) {
            $("#disabilityOther").attr("readonly", false);
        }else if(disability == 8 && event.currentTarget.checked == false){
            $("#disabilityOther").attr("readonly", true);
            $("#disabilityOther").val("");
        }
    }

    function changeOtherNation() {
        $("#nationText").val($("#other_nation").val());
    }
</script>
</body>
</html>